import React, { useEffect, useState } from 'react'
import Nav from '../../component/Nav'
import { Tabs, Image, SwipeAction, Toast, Badge } from 'antd-mobile/2x'
import api from '../../api/news'
import { filterTimeSSS } from "../../utils/filterTime"
import "./index.scss"
export default function News(props) {
    const { push } = props.history;
    const [list, setList] = useState([]);
    const [notice, setNotice] = useState([]);
    useEffect(() => {
        let user = JSON.parse(localStorage.getItem("user"));
        api.getGoodList({ user_id: user.id }).then(res => {
            console.log(res);
            setList([...res.data.data])
            setNotice([...res.data.notice])
        })
        return () => {
            user = null;
        }
    }, [])
    return (
        <div className='newsWarp'>
            <Nav>消息列表</Nav>
            <div className="content" style={{ flex: "1" }}>
                <Tabs>
                    <Tabs.Tab title='消息' key='fruits'>
                        {
                            list.length > 0 && list.map(v => {
                                return <SwipeAction key={v.id}
                                    onAction={
                                        () => {
                                            console.log(111);
                                        }
                                    }
                                    rightActions={[
                                        {
                                            key: 'delete',
                                            text: '删除',
                                            color: 'danger',

                                        },
                                    ]}
                                >
                                    <dl onClick={() => {
                                        api.clear({ id: v.id }).then(res => {
                                            console.log(res);
                                        })
                                        push({
                                            pathname: "/goodDetails",
                                            state: {
                                                sender_id: v.goodFriend_id,
                                                receive_id: v.user_id,
                                                name: v.goodFriend_name
                                            }
                                        })
                                    }}>
                                        {/* goodFriend_headImg: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Ffb9431a4c99691e54952d85ed034faf9a6b7e4f22d45-xy5FHF_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642992836&t=6e008edf1314a1617ab0b9498711176f"
                                        goodFriend_id: 2
                                        goodFriend_name: "李想"
                                        id: 1
                                        newNews: "步步萨队好is电话袄is电话"
                                        quantity: 0
                                        update_time: 1640517999656
                                        user_id: 5 */}
                                        <dt>
                                            <Image lazy
                                                src={v.goodFriend_headImg ? v.goodFriend_headImg : "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Ffb9431a4c99691e54952d85ed034faf9a6b7e4f22d45-xy5FHF_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642992836&t=6e008edf1314a1617ab0b9498711176f"}
                                                width={"100%"}
                                                height={"100%"}
                                            />
                                        </dt>
                                        <dd>
                                            <p><span>{v.goodFriend_name}   <Badge content={v.quantity} /></span><span>{filterTimeSSS(v.update_time)}</span></p>
                                            <p>
                                                {v.newNews}
                                            </p>
                                        </dd>
                                    </dl>
                                </SwipeAction>

                            })
                        }
                    </Tabs.Tab>
                    <Tabs.Tab title='公告' key='vegetables'>
                        {
                            notice.length > 0 && notice.map(v => {
                                return <SwipeAction
                                    onAction={
                                        () => {
                                            api.delNotice({ id: v.id }).then(res => {
                                                if (res.success) {
                                                    Toast.show({
                                                        content: "删除成功"
                                                    });
                                                } else {
                                                    Toast.show({
                                                        content: "删除失败"
                                                    })
                                                }
                                            })
                                        }
                                    } key={v.id + "b"} rightActions={[
                                        {
                                            key: 'delete',
                                            text: '删除',
                                            color: 'danger',
                                        },
                                    ]}>
                                    <div className='noticeBox'>
                                        <p><span>{v.title}<Badge content='新消息!' /></span><span>{filterTimeSSS(v.create_time)}</span></p>
                                        <p>{v.content}</p>

                                    </div>

                                </SwipeAction>

                            })
                        }
                    </Tabs.Tab>
                </Tabs>
            </div>
        </div>
    )
}
